<template>
  <div class="login-container">
    <h3 class="title">系统登录</h3>
    <el-form
      :model="loginInfo"
      class="el-form"
      :rules="loginRules"
      ref="loginForm"
      v-loading="loading"
      element-loading-text="正在登录..."
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)"
    >
      <el-form-item prop="username">
        <el-input
          v-model="loginInfo.username"
          placeholder="请填写用户名"
          type="test"
        ></el-input>
      </el-form-item>

      <el-form-item prop="password">
        <el-input
          v-model="loginInfo.password"
          placeholder="请填写密码"
          type="password"
        ></el-input>
      </el-form-item>

      <el-form-item prop="code">
        <el-input
          class="el-input-captcha"
          v-model="loginInfo.code"
          placeholder="点击图片更换验证码"
          type="text"
        ></el-input>
        <img
          :src="captchaUrl"
          align=absmiddle
          @click="changeCaptcha"
        />
      </el-form-item>

      <el-form-item>
        <el-checkbox
          label="记住我"
          :checked=true
        ></el-checkbox>
      </el-form-item>

      <el-form-item>
        <el-button
          clsss="el-button"
          type="primary"
          @click="submitLogin"
        >登录</el-button>
      </el-form-item>

    </el-form>
  </div>
</template>


<script>

export default {

  name: 'Login',

  data() {
    return {
      loginInfo: {
        username: 'admin',
        password: '123',
        code: ''
      },
      captchaUrl: '',
      loading: false,
      loginRules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 4, max: 18, message: '长度在 4 到 8 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ],
        code: [
          { required: true, message: '请输入验证码', trigger: 'blur' }
        ]
      }
    }

  },

  methods: {
    changeCaptcha() {
      this.captchaUrl = '/captcha' + '?time=' + new Date()
    },
    submitLogin() {
      this.$refs['loginForm'].validate((valid) => {
        if (valid) {
          //开启载入动画
          this.loading = true
          this.postRequest('/login', this.loginInfo).then(resp => {
            if (resp) {
              window.sessionStorage.setItem('tokenStr', resp.tokenHead + " " + resp.token)

              //建立WebSocket连接
              this.$store.dispatch('connect');

              let path = this.$route.query.redirect
              path = (path == '/' || path == undefined) ? "/home" : path

              //设置回调函数，解决跳转报错问题,也可以在router中统一处理该问题
              this.$router.replace(path, () => { }, () => { })
            }
            //关闭载入动画
            this.loading = false
          })
        } else {
          this.$message.error('请完整填写信息')
          return false
        }
      })

    },

    loadCaptcha() {
    },

  },

  mounted() {
    this.captchaUrl = '/captcha' + '?time=' + new Date()
  },
}
</script>


<style scoped>
.login-container {
  width: 400px;
  margin: 100px auto;
  border: 1px solid rgb(213, 213, 213);
  border-radius: 10px;
  box-shadow: 0 0 25px rgb(211, 209, 209);
}
.title {
  text-align: center;
}
.el-form {
  margin: auto;
  width: 90%;
}
.el-button {
  width: 100%;
}
.el-input-captcha {
  width: 250px;
  margin-right: 5px;
}
</style>